import React from "react"
import {
  Card,
  CardHeader,
  CardTitle,
  CardBody,
  Row,
  Col,FormGroup, Label, Button
} from "reactstrap"
import registerImg from "../../../../assets/img/pages/register.jpg"
import "../../../../assets/scss/pages/authentication.scss"
import { connect } from "react-redux";
import { Formik, Field, Form } from "formik";
import * as Yup from "yup";
import { registerUser } from '../../../../redux/actions/auth/loginActions';
import { history } from "../../../../history"
import Spinner from "../../../../components/@vuexy/spinner/Full-loading-spinner"


const formSchema = Yup.object().shape({
  name: Yup.string().required("Обязательно"),
  email: Yup.string()
    .email("Неправильный формат электронной почты")
    .required("Обязательно"),
  password: Yup.string()
    .min(4, "Минимальная длина 4 символа")
    .required("Обязательно"),
  confirm_password: Yup.string().min(4, "Минимальная длина 4 символа").required("Обязательно").when("password", {
    is: val => (val && val.length > 0 ? true : false),
    then: Yup.string().oneOf(
      [Yup.ref("password")],
      "Пароли не совпадают"
    ),
  }),
})

class Register extends React.Component {
  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    this.props.registerUser(e.name, e.email, e.password)
  }

  render() {
    return (
      <Row className="m-0 justify-content-center">
        <Col
          sm="8"
          xl="7"
          lg="10"
          md="8"
          className="d-flex justify-content-center"
        >
          <Card className="bg-authentication rounded-0 mb-0 w-100">
            <Row className="m-0">
              <Col
                lg="6"
                className="d-lg-block d-none text-center align-self-center px-1 py-0"
              >
                <img className="mr-1" src={registerImg} alt="registerImg" />
              </Col>
              <Col lg="6" md="12" className="p-0">
                <Card className="rounded-0 mb-0 p-sm-2 p-0 py-1">
                  {
                    this.props.spinner.indexOf('register-form') !== -1 && <div className="zindex-4 w-100 min-h-100"><Spinner/></div>
                  }
                  <CardHeader className="pb-1 pt-50">
                    <CardTitle>
                      <h4 className="mb-0">Регистрация</h4>
                    </CardTitle>
                  </CardHeader>
                  <p className="px-2 auth-title mb-0">
                    Заполните форму ниже, чтобы создать новую учетную запись.
                  </p>
                  <CardBody className="pt-1 pb-50">

                    <Formik
                      initialValues={{
                        name: "",
                        email: "",
                        password: "",
                        confirm_password: ""
                      }}
                      onSubmit={this.handleSubmit}
                      validationSchema={formSchema}
                    >
                      {({ errors, touched }) => (
                        <Form>
                          <FormGroup className="my-1">
                            <Label for="name">Имя</Label>
                            <Field
                              name="name"
                              id="name"
                              autoComplete="off"
                              className={`form-control ${errors.name &&
                              touched.name &&
                              "is-invalid"}`}
                            />
                            {errors.name && touched.name ? (
                              <div className="invalid-tooltip mt-25">{errors.name}</div>
                            ) : null}
                          </FormGroup>

                          <FormGroup className="my-2">
                            <Label for="email">Email</Label>
                            <Field
                              type="email"
                              name="email"
                              id="email"
                              autoComplete="off"
                              className={`form-control ${errors.email &&
                              touched.email &&
                              "is-invalid"}`}
                            />
                            {errors.email && touched.email ? (
                              <div className="invalid-tooltip mt-25">{errors.email}</div>
                            ) : null}
                          </FormGroup>
                          <FormGroup className="my-2">
                            <Label for="password">
                              Пароль
                            </Label>
                            <Field
                              name="password"
                              id="password"
                              type="password"
                              className={`form-control ${errors.password &&
                              touched.password &&
                              "is-invalid"}`}
                            />
                            {errors.password && touched.password ? (
                              <div className="invalid-tooltip mt-25">{errors.password}</div>
                            ) : null}
                          </FormGroup>
                          <FormGroup className="mb-3">
                            <Label  for="confirm_password">
                              Подтвердите пароль
                            </Label>
                            <Field
                              name="confirm_password"
                              id="confirm_password"
                              type="password"
                              className={`form-control ${errors.confirm_password &&
                              touched.confirm_password &&
                              "is-invalid"}`}
                            />
                            {errors.confirm_password && touched.confirm_password ? (
                              <div className="invalid-tooltip mt-25">{errors.confirm_password}</div>
                            ) : null}
                          </FormGroup>
                          <div className="d-flex justify-content-between">
                            <Button.Ripple
                              color="primary"
                              outline
                              onClick={() => {
                                history.push("/login")
                              }}
                            >
                              Вход
                            </Button.Ripple>
                            <Button.Ripple color="primary" type="submit">
                              Регистрация
                            </Button.Ripple>
                          </div>
                        </Form>
                      )}
                    </Formik>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    )
  }
}
const mapStateToProps = state => {
  return {
    spinner: state.helper.spinner
  }
};
export default connect(mapStateToProps, { registerUser })(Register)
